<template>
	<div>
		<el-row class="bg2">
			<el-col :span="24" style="height: 100%;">
				<h3 class="baseHeader" style="text-align: left;">{{title}}</h3>
				<div class="baseInfoEcharts">
					<div  id="baseEcharts" style="width: 100%;height: 100%;"></div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default{
		data(){
			return{
				dcuList:[],
				DCUNumber:'',
				dataX:[0],//横坐标
				dataY:[0],//速度曲线
				dataYD:[0],//动能曲线
				title:'',
				type:-1,
			}
		},
		created() {
		   this.DCUNumber = this.$route.query.doorDcu
		   this.type = this.$route.query.type
		},
		mounted() {
			this.init()
			// this.initEcharts()
		},
		methods:{
			init(){
				if(this.type==0){
					this.title = '开门速度曲线及动能曲线实时参数'
				}else{
					this.title = '关门速度曲线及动能曲线实时参数'
				}
			   this.$nextTick(()=>{
				    this.dcuList = []
					 this.dataY = [0]
				    this.$http.get(`/psc/dcu/speedCurve64?dcu=${this.DCUNumber}`).then(res=>{
					   if(res.data){
						   res.data.data.reverse().forEach(item=>{
							   this.dcuList.push(JSON.parse(item))
						   })
						  this.dcuList.forEach((val,index)=>{
							  this.dataY.push(val.v1,val.v2,val.v3,val.v4,val.v5,val.v6,val.v7,val.v8,val.v9)
							  this.dataYD.push(val.ek1,val.ek2,val.ek3,val.ek4,val.ek5,val.ek6,val.ek7,val.ek8,val.ek9)
							 var x = data.dcuCurrentTimeMillis;
							 for (var i = 0; i < 11; i++) {
							 	if (i == 0) {
							 		this.dataX1[i] = this.filterTime(x)
							 		// this.dataX1.push(this.filterTime(x))
							 	} else if (i == 10) {
							 		//获取第一点数据
							 		var t0 = message.t9 - message.t8
							 		var t8 = message.t9 + t0
							 		this.dataX[i] = this.getnewSeconds(x, t8)
							 		// this.dataX1.push(this.getnewSeconds(x, t8));
							 	} else {
							 		this.dataX[i] = this.getnewSeconds(x, message["t" + `${i}`])
							 		// this.dataX1.push(this.getnewSeconds(x, message["t" + `${i}`]));
							 	}
							 }
							 this.refreshData(this.dataX, this.dataYD, this.dataY);
						  }) 
					   }
				   })
			    })	
			},
			// 新增毫秒相加
			getnewSeconds(val, tep) {
				var newTime = new Date(val + tep * 1000); //根据时间戳和秒相加得到最新的时间戳
				return this.filterTime(newTime);
			},
			filterTime(time) {
			   var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			   var Y = date.getFullYear() + "-";
			   var M =
			   	(date.getMonth() + 1 < 10 ?
			   		"0" + (date.getMonth() + 1) :
			   		date.getMonth() + 1) + "-";
			   var D = date.getDate() + " ";
			   var h = date.getHours() + ":";
			   var m = date.getMinutes() + ":";
			   var s = date.getSeconds() + ".";
			   var ms = date.getMilliseconds();
			   return h + m + s + ms;
			},
			refreshData(dataX, dataYD, dataY, val) {
				var myChart = this.$echarts.init(document.getElementById("baseEcharts"));
				var option = myChart.getOption();
				option.xAxis[0].data = dataX;
				option.series[0].data = dataYD;
				option.series[1].data = dataY;
				myChart.setOption(option);
			},
			initEcharts(){
				var myChart = this.$echarts.init(document.getElementById('baseEcharts'))
				const colorList = ["#F3D024FF", '#2062E6FF']
				var option = {
				    backgroundColor: '#fff',
				    legend: {
				        icon: 'circle',
				        top: '5%',
				        right: '5%',
				        itemWidth: 6,
				        itemGap: 20,
				        textStyle: {
				            color: '#556677'
				        }
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            label: {
				                show: true,
				                backgroundColor: '#fff',
				                color: '#556677',
				                borderColor: 'rgba(0,0,0,0)',
				                shadowColor: 'rgba(0,0,0,0)',
				                shadowOffsetY: 0
				            },
				            lineStyle: {
				                width: 0
				            }
				        },
				        backgroundColor: '#fff',
				        textStyle: {
				            color: '#5c6c7c'
				        },
				        padding: [10, 10],
				        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
				    },
				    grid: {
				        top: '20%',
						left:'5%',
						right:'5%'
				    },
					dataZoom: [
					      {
					         // 这个地方是控制下面的滑动条。
					         show: true,
					         realtime: true,
					         // start: 0,
					         // end: 100,
					         // xAxisIndex: [0, 1],
					      },
					      {
					         type: 'inside',
					         realtime: true,
					         start: 0,
					         end: 100,
					         xAxisIndex: [0, 1],
					      },
					   ],
				    xAxis: [{
				        type: 'category',
				        data: this.dataX,
				        axisLine: {
				            lineStyle: {
				                color: '#DCE2E8'
				            }
				        },
				        axisTick: {
				            show: false
				        },
				        axisLabel: {
				            interval: 0,
				            textStyle: {
				                color: '#556677'
				            },
				            // 默认x轴字体大小
				            fontSize: 12,
				            // margin:文字到x轴的距离
				            margin: 15
				        },
				        axisPointer: {
				            label: {
				                // padding: [11, 5, 7],
				                padding: [0, 0, 10, 0],
				                margin: 15,
				                fontSize: 12,
				                backgroundColor: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: '#fff' // 0% 处的颜色
				                    }, {
				                        offset: 0.86,
				                        color: '#fff' // 0% 处的颜色
				                    }, {
				                        offset: 0.86,
				                        color: '#33c0cd' // 0% 处的颜色
				                    }, {
				                        offset: 1,
				                        color: '#33c0cd' // 100% 处的颜色
				                    }],
				                    global: false // 缺省为 false
				                }
				            }
				        },
				        boundaryGap: false
				    }],
				    yAxis: [{
				        type: 'value',
				        axisTick: {
				            show: false
				        },
				        axisLine: {
				            show: true,
				            lineStyle: {
				                color: '#DCE2E8'
				            }
				        },
				        axisLabel: {
				            textStyle: {
				                color: '#556677'
				            }
				        },
				        splitLine: {
				            show: false
				        }
				    }, {
				        type: 'value',
				        position: 'right',
				        axisTick: {
				            show: false
				        },
				        axisLabel: {
				            textStyle: {
				                color: '#556677'
				            },
				            formatter: '{value}'
				        },
				        axisLine: {
				            show: true,
				            lineStyle: {
				                color: '#DCE2E8'
				            }
				        },
				        splitLine: {
				            show: false
				        }
				    }],
				    series: [{
				            name: '动能曲线',
				            type: 'line',
				            data: this.dataYD,
				            symbolSize: 1,
				            symbol: 'circle',
				            smooth: true,
				            yAxisIndex: 0,
				            showSymbol: false,
				            lineStyle: {
				                width: 5,
				                color: colorList[0]
				            },
				            itemStyle: {
				                normal: {
				                    color: colorList[0],
				                    borderColor: colorList[0]
				                }
				            }
				        }, {
				            name: '速度曲线',
				            type: 'line',
				            data: this.dataY,
				            symbolSize: 1,
				            symbol: 'circle',
				            smooth: true,
				            yAxisIndex: 1,
				            showSymbol: false,
				            lineStyle: {
				                width: 5,
				                color: colorList[1]
				            },
				            itemStyle: {
				                normal: {
				                    color: colorList[1],
				                    borderColor: colorList[1]
				                }
				            }
				        }]
				};
				option.dataZoom[0].startValue = 0
				option.dataZoom[0].endValue = this.dataX[16]
				myChart.setOption(option);
				window.addEventListener("resize", () => {
				   myChart.resize();
				});
			}
		}
	}
</script>

<style scoped>
	.bg2{
		background-color: #fff;
		border-radius: 10px;
		padding:2.1vh 1.5vw;
		margin-top: 10px;
		height: 38.1vh;
		min-height: 300px;
	}
	.baseHeader{
		margin: 0;
		font-size: 18px;
		font-weight: 500;
		color: rgba(46, 48, 51, 1);
	}
	.baseInfoEcharts{
		width: 100%;
		height: calc(100% - 23px);
	}
</style>